/*
* @Author: karry
* @Date:   2020-02-23 12:27:22
* @Last Modified by:   karry
* @Last Modified time: 2020-02-23 12:27:22
*/
import React 	  	from 'react';
import { Link }   	from 'react-router-dom';
import MUtil 		from 'util/db.jsx';
import Order 		from 'service/order-service.jsx';

import PageTitle  	from 'component/page-title/index.jsx';
import TableList 	from 'util/table-list/index.jsx';
import Pagination 	from 'util/pagination/index.jsx';
import ListSearch 	from './index-list-search.jsx';


const _db 		= new MUtil();
const _order 	= new Order();

class OrderList extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			list 		 : [],
			pageNum 	 : 1,
			listType 	 : 'list'
		};
	}
	componentDidMount(){
		this.loadOrderList();
	}
	// 加载商品列表
	loadOrderList(){
		let listParam = {};
		listParam.listType = this.state.listType;
		listParam.pageNum  = this.state.pageNum;
		// 如果是搜索的话，需要传入的搜索类型和搜索关键字
		if (this.state.listType === 'search') {
			listParam.orderNo = this.state.orderNumber;
		}
		// 请求接口
		_order.getOrderList(listParam).then(res => {
			this.setState(res);
		}, errMsg => {
			this.setState({
				list : []
			});
			_db.errorTips(errMsg);
		});
	}
	// 搜索
	onSearch(orderNumber){
		let listType = orderNumber === '' ? 'list' : 'search';
		this.setState({
			listType 		: listType,
			pageNum  		: 1,
			orderNumber 	: orderNumber
		}, () => {
			this.loadOrderList();
		});
	}
	// 当页数发生变化的时候
	onPageNumChange(pageNum){
		this.setState({
			pageNum : pageNum
		}, () => {
			this.loadOrderList();
		});
	}
	render(){
		let tableHeads = ['订单号','收件人','订单状态','订单总价','创建时间','操作',];
		return (
			<div id="page-wrapper">
				<PageTitle title="订单列表" />
				<ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)}} />
				<TableList tableHeads={tableHeads}>
					{
						this.state.list.map((order, index) => {
							return (
								<tr key={index}>
									<td>
										<Link to={ `/order/detail/${order.orderNo}`} >{order.orderNo}</Link>
									</td>
									<td>{order.receiverName}</td>
									<td>{order.statusDesc}</td>
									<td>￥{order.payment}</td>
									<td>{order.createTime}</td>
									<td>
										<Link to={ `/order/detail/${order.orderNo}`} >详情</Link>
									</td>
								</tr>
							);
						})
					}
				</TableList>
				<div className="pageination">
					<Pagination current={this.state.pageNum} total={this.state.total} onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
				</div>
			</div>
		);
	}
}

export default OrderList;